import Vue from "vue";
import VueRouter from "vue-router";

import store from "@/store";
// 将所有组件都打包到一个js文件中
// import Home from "@/views/Home";
// import Search from "@/views/Search";
// import Login from "@/views/Login";
// import Register from "@/views/Register";
// import Detail from "@/views/Detail";
// import AddCartSuccess from "@/views/AddCartSuccess";
// import ShopCart from "@/views/ShopCart";
// import Trade from "@/views/Trade";
// import Pay from "@/views/Pay";
// import PaySuccess from "@/views/PaySuccess";
// import Center from "@/views/Center";

/*
  路由懒加载
    功能：需要使用哪个组件，才会加载哪个组件
    实现：
      1. 将路由组件单独打包成一个js文件
      2. 按需加载：需要使用哪个组件，才会加载哪个组件
*/

const Home = () => import(/* webpackChunkName: "Home" */ "@/views/Home");
const Search = () => import(/* webpackChunkName: "Search" */ "@/views/Search");
const Login = () => import(/* webpackChunkName: "Login" */ "@/views/Login");
const Register = () =>
  import(/* webpackChunkName: "Register" */ "@/views/Register");
const Detail = () => import(/* webpackChunkName: "Detail" */ "@/views/Detail");
const AddCartSuccess = () =>
  import(/* webpackChunkName: "AddCartSuccess" */ "@/views/AddCartSuccess");
const ShopCart = () =>
  import(/* webpackChunkName: "ShopCart" */ "@/views/ShopCart");
const Trade = () => import(/* webpackChunkName: "Trade" */ "@/views/Trade");
const Pay = () => import(/* webpackChunkName: "Pay" */ "@/views/Pay");
const PaySuccess = () =>
  import(/* webpackChunkName: "PaySuccess" */ "@/views/PaySuccess");
const Center = () => import(/* webpackChunkName: "Center" */ "@/views/Center");

// 所有Vue的插件需要安装
Vue.use(VueRouter);

/*
  路由两种模式：
    hash
      路径带#
      兼容性更好
      实现原理不一样：location.hash hashchange
    history
      不带
      兼容性稍差
      实现原理不一样：history.pushState()
*/
const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/home",
      component: Home,
      name: "Home",
      // meta: {
      //   isShowFooter: true,
      // },
    },
    {
      path: "/search",
      component: Search,
      name: "Search",
      // meta: {
      //   isShowFooter: true,
      // },
    },
    {
      path: "/detail/:id",
      component: Detail,
      name: "Detail",
    },
    {
      path: "/addcartsuccess",
      component: AddCartSuccess,
      name: "AddCartSuccess",
    },
    {
      path: "/shopcart",
      component: ShopCart,
      name: "ShopCart",
    },
    {
      path: "/trade",
      component: Trade,
      name: "Trade",
    },
    {
      path: "/pay",
      component: Pay,
      name: "Pay",
    },
    {
      path: "/paysuccess",
      component: PaySuccess,
      name: "PaySuccess",
    },
    {
      path: "/center",
      component: Center,
      name: "Center",
    },
    {
      path: "/login",
      component: Login,
      name: "Login",
      // meta: {
      //   // 是否显示底部Footer
      //   isShowFooter: false,
      // },
      meta: {
        isHideFooter: true,
      },
    },
    {
      path: "/register",
      component: Register,
      name: "Register",
      // meta: {
      //   isShowFooter: false,
      // },
      meta: {
        isHideFooter: true,
      },
    },
    {
      path: "*",
      redirect: "/home",
    },
  ],
  // 滚动行为：当每次路由跳转时会触发，返回决定页面滚动条的位置
  scrollBehavior() {
    return {
      x: 0,
      y: 0,
    };
  },
});

/*
  路由导航守卫：
    1. 全局路由导航守卫
      beforeEach 在路由跳转之前触发
      beforeResolve
      afterEach
    2. 路由独享导航守卫
    3. 组件独享导航守卫
*/

// 需要登录才能访问的路由名称数组
const auth_list = [
  "AddCartSuccess",
  "ShopCart",
  "Trade",
  "Pay",
  "PaySuccess",
  "Center",
];

// 全局路由前置守卫：每次路由跳转都会触发
router.beforeEach((to, from, next) => {
  /*
    假设 /home 跳转到 /search
      to 代表 /search（要去路由对象 / route对象）
      from 代表 /home（从哪来的路由对象）
      next 是一个函数，必须要调用
        next() 放行，路由就会跳转到to路由对应的地址
        next('/home') / next({ name: 'Home' }) 路由跳转到其他地址

    需求：
      没有登录，不能访问购物车、支付、我的订单等页面，去登录页面先登录
  */
  if (auth_list.includes(to.name)) {
    // 在，看是否登录
    if (store.state.user.token) {
      next();
    } else {
      next({
        name: "Login",
        query: {
          redirect: to.path,
        },
      });
    }
  } else {
    // 不在
    next();
  }
});

export default router;
